h1 {
    color: red;
}
$color: rgb(38, 0, 255);
$num: 20;
$left: left;
$num1 :2;
$num2 :1;
.d1 {
    color: $color;
    font-size: #{$num}px;
    margin-#{$left}: 10px
}
.d2 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
    margin-left: 10px + 10px;
    margin-top: 20px - 10px;
    margin-right: 3 * 6px;
    margin-bottom: calc(10 / 2) + px;
    padding-left: $num1 + $num2 + px;
    padding-left: $num1 - $num2 + px;
    padding-top: calc($num1 / $num2) + px;
    font-size: #{$num1 + 10} + px;
}
// .main .left .center p{
//     color: red;
// }
.main {
    color: aqua;
    .left {
        .center {
            p {
                color: blue;
            }
        }
    }
}
.search{
    width: 490px;
    height: 36px;
    border: 2px solid #e2231a;
    display: flex;
    .left {
        flex: 1;
        display: flex;
        .left-input {
            flex: 1;
            padding: 6px 10px;
            display: flex;
        input {
            flex: 1;
            border: none;
            outline: none;
            }
        }
        .left-camera {
            flex-basis: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }    
        .iconfont {
            &:hover {
                color: red;
            }
        }            
    }
    .right {
        flex-basis: 58px;
        background-color: #e1251b;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &:hover{
            background-color: #a73b35;
            transition-delay: .5s;
        }
        .iconfont {
            color: white;
            font-weight: bold;
            font-size: 20px;
        }
    }
}

.d3 {
    width: 100px;
    height: 100px;
    border: {
        style: solid;
        color: red;
        top: {
            left: {
                radius: 10px;
            }
        }
    };
    font: {
        size: 20px;
    }
}
.d4 {
    width: 100px;
    height: 100px;
    border: solid;
    &:hover {
    background-color: red;
    }
}



// 单行注释（只会显示在scss文件中）

/* 
    标准（多行）注释
    会显示在css文件中
*/

/*!
    重要注释
*/

/* 
    一个选择器可以让多个选择器继承
    继承的关键字 @extend
*/

.d5 {
    width: 100px;
    height: 100px;
    border: 1px solid red;
}
.d6 {
    @extend .d5;
    font-size:20px;
}
.d7 {
    @extend .d6;
}

/* 
    先使用@mixin定义一个混合
    在使用@include使用这个混合
*/
@mixin m1($width) {
    width: $width;
    height: 100px;
    border: 1px solid red;
}
.d8{
    @include m1(100px);
}
.d9{
    @include m1(200px);
} 

// 在scss文件中引入scss文件
@import "./a.scss";

.d10 {
    width: 100px;
    height: 100px;
    border: solid;
    /* 
        @if 条件为true，css代码生效
            条件为false，css代码不生效
        如果设置了@else的话
            条件为true，if里面的css代码生效
            条件为false，else里面的css代码生效
    */
    @if 2 > 1 {
    background-color: red;
    } 
    @else {
        background-color: blue;
    }
}

/* 
    for循环
    $i的值从from后面的值开始到to后面的值结束（不包括to的值）
    从小到大就是每次+1，从大到小就是每次-1
*/
@for $i from 1 to 10 {
    .a#{$i} {
        border: #{$i} px solid red;
    }
}

@for $i from 10 to 1 {
    .b#{$i} {
        border: #{$i} px solid red;
    }
}

@for $i from 1 to 13 {
    col-#{$i} {
        flex: 0 0 #{$i / 12 * 100%};
    }
}

$a: 1;
@while $a < 11 {
    .b#{$a} {
        border: #{$a}px solid red;
    }
    $a: $a +1;
}
$b: 10;
@while $b > 0 {
    .e#{$b} {
        border: #{$b}px solid red;
    }
    $b: $b - 1;
}

@each $v in 1,2,a,b,c,d {
    .f#{$v} {
        background-image: url(#{$v}.pgn);
    }
}

@function double($num) {
    @return $num * 2;
}
.d10 {
    width: double((10px));
    height: double((20px));
}

